<template>
    <div class="login-container">
      <div class="login-header">
        <div class="logo">
          <span class="logo-text">VUE-XIAOMAI 管理系统</span>
        </div>
      </div>
      
      <div class="login-main">
        <div class="login-form-container">
          <div class="login-form">
            <h2 class="login-title">管理员登录</h2>
            
            <el-form
              ref="loginFormRef"
              :model="loginForm"
              :rules="loginRules"
              class="login-form-content"
            >
              <el-form-item prop="username">
                <el-input
                  v-model="loginForm.username"
                  placeholder="请输入用户名"
                  size="large"
                  :prefix-icon="User"
                />
              </el-form-item>
              
              <el-form-item prop="password">
                <el-input
                  v-model="loginForm.password"
                  type="password"
                  placeholder="请输入密码"
                  size="large"
                  :prefix-icon="Lock"
                  show-password
                  @keyup.enter="handleLogin"
                />
              </el-form-item>
              
              <el-form-item>
                <div class="button-group">
                  <el-button
                    type="primary"
                    size="large"
                    class="login-btn"
                    :loading="loading"
                    @click="handleLogin"
                  >
                    {{ loading ? '登录中...' : '登录' }}
                  </el-button>
                  <el-button
                    size="large"
                    class="register-btn"
                    @click="handleRegister"
                  >
                    注册
                  </el-button>
                </div>
              </el-form-item>
            </el-form>
            
            <!-- 测试账号提示 -->
            <div class="test-account">
              <p>测试账号：admin / admin123</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { User, Lock } from '@element-plus/icons-vue'
  
  const router = useRouter()
  
  // 登录表单
  const loginForm = reactive({
    username: 'admin',
    password: 'admin123'
  })
  
  // 表单验证规则
  const loginRules = {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' }
    ]
  }
  
  const loginFormRef = ref()
  const loading = ref(false)
  
  // 处理登录
  const handleLogin = async () => {
    if (!loginFormRef.value) return
    
    try {
      const valid = await loginFormRef.value.validate()
      if (!valid) return
      
      loading.value = true
      
      console.log('发送登录请求:', loginForm)
      
      // 调用登录接口
      const response = await fetch('http://localhost:8080/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(loginForm)
      })
      
      console.log('响应状态:', response.status)
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }
      
      const result = await response.json()
      console.log('完整登录响应:', result)
      
      // 根据后端实际返回的数据结构处理
      if (result.code === 1) {
        console.log('登录成功，准备跳转...')
        
        // 保存用户信息到 localStorage
        localStorage.setItem('token', result.data.token || 'test-token')
        localStorage.setItem('userInfo', JSON.stringify({
          id: result.data.id,
          username: result.data.username
        }))
        
        console.log('保存的token:', localStorage.getItem('token'))
        
        ElMessage.success('登录成功')
        
        // 跳转到主页面
        router.push('/main/dashboard')
        console.log('路由跳转指令已执行')
        
      } else {
        console.log('登录失败:', result.msg)
        ElMessage.error(result.msg || '登录失败')
      }
    } catch (error) {
      console.error('登录错误:', error)
      ElMessage.error('登录失败: ' + error.message)
    } finally {
      loading.value = false
    }
  }
  
  // 处理注册
  const handleRegister = async () => {
    ElMessageBox.alert('注册功能暂未开放，请联系系统管理员', '提示', {
      confirmButtonText: '确定',
      type: 'info'
    })
  }
  </script>
  
  <style scoped>
  .login-container {
    height: 100vh;
    background: linear-gradient(135deg, 
      #667eea 0%, 
      #764ba2 50%, 
      #f093fb 100%);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
  }
  
  /* 添加背景装饰元素 */
  .login-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: float 20s infinite linear;
  }
  
  @keyframes float {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    100% {
      transform: translate(-50px, -50px) rotate(360deg);
    }
  }
  
  .login-header {
    padding: 20px 40px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 1;
  }
  
  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .logo-text {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
  }
  
  .login-main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    position: relative;
    z-index: 1;
  }
  
  .login-form-container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 
      0 20px 40px rgba(0, 0, 0, 0.1),
      0 0 0 1px rgba(255, 255, 255, 0.2);
    overflow: hidden;
    width: 420px;
    max-width: 90vw;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transform: translateY(0);
    transition: all 0.3s ease;
  }
  
  .login-form-container:hover {
    transform: translateY(-5px);
    box-shadow: 
      0 25px 50px rgba(0, 0, 0, 0.15),
      0 0 0 1px rgba(255, 255, 255, 0.3);
  }
  
  .login-form {
    padding: 50px 40px;
    position: relative;
  }
  
  .login-title {
    text-align: center;
    margin-bottom: 40px;
    color: #2c3e50;
    font-size: 28px;
    font-weight: 600;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .login-form-content {
    width: 100%;
  }
  
  .button-group {
    display: flex;
    gap: 16px;
    width: 100%;
  }
  
  .login-btn {
    flex: 2;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.3s ease;
  }
  
  .login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
  }
  
  .register-btn {
    flex: 1;
    background: rgba(102, 126, 234, 0.1);
    border: 2px solid #667eea;
    color: #667eea;
    font-weight: 600;
    transition: all 0.3s ease;
  }
  
  .register-btn:hover {
    background: #667eea;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
  }
  
  .test-account {
    margin-top: 25px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(102, 126, 234, 0.2);
  }
  
  .test-account p {
    margin: 0;
    font-size: 13px;
    color: #667eea;
    font-weight: 500;
  }
  
  :deep(.el-input__wrapper) {
    border-radius: 12px;
    border: 2px solid #e4e7ed;
    background: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
    box-shadow: none;
  }
  
  :deep(.el-input__wrapper:hover) {
    border-color: #c0c4cc;
  }
  
  :deep(.el-input__wrapper.is-focus) {
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
  }
  
  :deep(.el-button) {
    border-radius: 12px;
    border: none;
    height: 48px;
    font-size: 16px;
  }
  
  :deep(.el-form-item) {
    margin-bottom: 25px;
  }
  
  :deep(.el-form-item__label) {
    font-weight: 600;
    color: #2c3e50;
  }
  
  /* 响应式设计 */
  @media (max-width: 480px) {
    .login-form {
      padding: 30px 20px;
    }
    
    .button-group {
      flex-direction: column;
      gap: 12px;
    }
    
    .login-btn,
    .register-btn {
      flex: none;
      width: 100%;
    }
    
    .logo-text {
      font-size: 20px;
    }
  }
  </style>